@@include('header.htm', {
  "title": "Progress Bar - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "progress-bar"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>Progress Bar</h1>

	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "progress-bar"
	})
</div>

<div class="row">
	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Default Progress Bars </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels <a href="https://getbootstrap.com/docs/4.6/components/progress/" target="_blank"> more details.</a></p>

				<div class="progress mb-3">
					<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress">
					<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>
			</div>
		</div>

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2> Multiple bars </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Include multiple progress bars in a progress component if you need. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/progress/#multiple-bars" target="_blank"> more details.</a></p>

				<div class="progress mb-3">
					<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>

					<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
						aria-valuemax="100"></div>

					<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar bg-success" role="progressbar" style="width: 27%" aria-valuenow="27" aria-valuemin="0"
						aria-valuemax="100"></div>

					<div class="progress-bar bg-danger" role="progressbar" style="width: 30%" aria-valuenow="35" aria-valuemin="0"
						aria-valuemax="100"></div>

					<div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>

				<div class="progress">
					<div class="progress-bar bg-danger" role="progressbar" style="width: 35%" aria-valuenow="30" aria-valuemin="0"
						aria-valuemax="100"></div>

					<div class="progress-bar bg-info" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
						aria-valuemax="100"></div>

					<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>
			</div>
		</div>

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Progress Bar Height</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">We only set a <code>height</code> value on the <code>.progress</code>, so if you change that value the inner <code>.progress-bar</code> will automatically resize accordingly. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/progress/#height" target="_blank"> more details.</a></p>

				<div class="progress mb-3" style="height: 2px;">
					<div class="progress-bar bg-info" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3" style="height: 5px;">
					<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3" style="height: 8px;">
					<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3" style="height: 12px;">
					<div class="progress-bar bg-danger" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>

				<div class="progress" style="height: 16px;">
					<div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0"
						aria-valuemax="100"></div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Progress Bar Labels</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add labels to your progress bars by placing text within the <code>.progress-bar</code>. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/progress/#labels" target="_blank"> more details.</a></p>

				<div class="progress mb-3">
					<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar bg-success" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
						aria-valuemax="100">50%</div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
						aria-valuemax="100">75%</div>
				</div>

				<div class="progress">
					<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
						aria-valuemax="100">100%</div>
				</div>
			</div>
		</div>

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Striped Progress Bar</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add <code>.progress-bar-striped</code> to any <code>.progress-bar</code> to apply a stripe via CSS gradient over the progress bar’s background color. Read Bootstrap	documentaion <a href="https://getbootstrap.com/docs/4.6/components/progress/#striped" target="_blank"> more details.</a></p>

				<div class="progress mb-3">
					<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25"
						aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 50%" aria-valuenow="50"
						aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
						aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress">
					<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100"
						aria-valuemin="0" aria-valuemax="100"></div>
				</div>
			</div>
		</div>

		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Animate Progress Bar</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">The striped gradient can also be animated. Add <code> .progress-bar-animated </code> to <code> .progress-bar </code> to animate the stripes right to left via CSS3 animations. Read Bootstrap	documentaion <a href="https://getbootstrap.com/docs/4.6/components/progress/#animated-stripes" target="_blank"> more details.</a></p>

				<div class="progress mb-3">
					<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%"
						aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 50%"
						aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress mb-3">
					<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 75%"
						aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
				</div>

				<div class="progress">
					<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 100%"
						aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
